<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/daterangepicker.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="enterpriseCommon/common.css">
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    [v-cloak] {
      display: none;
    }

  </style>
  <script src="js/vue.js"></script>
  <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div id="app" v-cloak>
    <header></header>
    <div class="header-space"></div>


    <section class="section321">
      <div class="content">

        <div class="panel">

          <div class="left">
            <h2><span>{{name}}</span><span>{{salary_min}}-{{salary_max}}K</span></h2>
            <p>{{showUser.enterprise}}</p>
            <p>{{education}} | {{nature}} | {{experience}} | 招{{num}}人</p>
            <div class="author">
              <div class="face"><a href="javascript:void(0)"><img :src="showUser.logo ||'images/face.jpg'" alt=""></a></div>
              <div class="con">
                <h3>{{showUser.name}}</h3>
                <p>{{userInfo?showUser.title: showUser.name}} | {{userInfo?'子账号':'公司账号'}} | 刚刚活跃</p>
              </div>
            </div>
          </div>
        </div>


        <div class="box box1">
          <div class="title-line">福利待遇</div>
          <div class="tags-box">
            <span v-for="(item, index) in welfareList" :key="index">{{item}}</span>
          </div>
        </div>
        <div class="box box2">
          <div class="title-line">职位描述</div>
          <div class="info" v-html="desc"></div>
          <div class="recruit-img-list">
            <img v-for="src in imgList" :key="src" :src="src" alt="" class="img">
          </div>
        </div>
        <div class="box box3">
          <div class="title-line">技能要求</div>
          <div class="info" v-html="skill"></div>
        </div>
        <div class="box box4">
          <div class="title-line">公司地址</div>
          <div id="map-container" class="map-box">
          </div>
        </div>

        <div class="bottom-operate">
          <a href="javascript: void(0)" class="btn btn-white" @click="backHandle">返回</a>
          <a href="javascript: void(0)" class="btn" @click="saveHandle">发布</a>
        </div>

      </div>
    </section>


    <footer>
    </footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=24688df90aef7762942b8f9b94ba2e70&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
  <script src="js/request.js"></script>
  <script src="js/getPrepareData.js"></script>
  <script>
    $(function() {
      $("header").load("./enterpriseCommon/header.html");
      $("footer").load("./enterpriseCommon/footer.html");
    })

  </script>
  <script>
    var PREVIEW_KEY = 'preview35';
    var vm = new Vue({
      el: '#app',
      data: {
        "id": getUrlParams().id || 0,
        enterprise: '',
        enterpriseInfo: null,
        userInfo: null,
        "name": "",
        "nature": "",
        "education": "",
        "salary_min": 0,
        "salary_max": 0,
        "num": 0,
        "experience": '',
        "area": '',
        "address": 0,
        "skill": "",
        "desc": "",
        "intro": "",
        imgList: [],
        "welfareList": [],
        isSend: false,
      },
      computed: {
        showUser() {
          return (window.headerVm&& headerVm.userInfo) || {}
        }
      },
      created: function() {
      },
      mounted: function() {
        var map = new AMap.Map('map-container');
        prepare.getRecruitPrepare(this.getRecruit.bind(this))
      },
      methods: {
        setPrepare: function(data) {
          this.natureList = data.nature;
          this.educationList = data.education;
          this.welfareList = data.welfare;
          this.experience_configList = data.experience_config;
          this.statusList = data.status;
        },

        getRecruit: function() {
          var data = JSON.parse(sessionStorage.getItem('recruit_session') || null)
          if (!data) {
            fail.call(this)
          } else {

            success.call(this, {
              data: data
            })
          }


          // var id = this.id;
          // request('enterprise/recruit/' + id, 'GET', '', success.bind(this), fail.bind(this))

          function success(res) {
            var data = res.data;
            var address = data.address;
            this.name = data.name;
            this.nature = prepare.getNatureName(data.nature_id);
            this.education = prepare.getEducationName(data.education_id);
            this.salary_min = data.salary_min;
            this.salary_max = data.salary_max;
            this.num = data.num;
            this.experience = prepare.getExperience_configName(data.experience_config_id) + '年';
            this.area = prepare.getRegionNameList(data.area_id)[0];
            this.address = address;
            this.skill = data.skill.replace(/\n/g, '<br>');
            this.desc = data.desc.replace(/\n/g, '<br>');
            this.imgList = data.img || [];
            this.intro = data.intro.replace(/\n/g, '<br>');
            this.welfareList = data.welfare_ids.split(',').map(function(item) {
              return prepare.getWelfareName(item)
            });
            var location = data.location
            var map = new AMap.Map('map-container', {
              center: location
            });
            var infoWindow = new AMap.InfoWindow({
              position: location,
              offset: new AMap.Pixel(0, -30),
              content: address,
            });
            var marker = new AMap.Marker({
              position: location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
              title: address
            });
            map.add(marker)
            marker.on('click', function() {
              infoWindow.open(map)
            })
            infoWindow.open(map)
          }

          function fail(err) {
            this.$message.error('没有预览岗位信息')
          }
        },
        backHandle: function() {
          // history.back()
          location.href = './35.html?session=recruit_session'
        },
        saveHandle: function(type) {
          var loading = this.$loading({
            lock: true,
            text: '发布中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          this.sendData(JSON.parse(sessionStorage.getItem('recruit_session')), 2, loading)
        },

        sendData: function(params, type, loading) {
          
          params.push = 1;
          var postData = JSON.stringify(params)

          function failFn(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            this.$message.error(msg)
            loading.close()
          }

          function successFn(res) {
            var id = res.data.id;
            loading.close()
            if (type === 2) {
              this.$message({
                type: 'success',
                message: res.message
              })
              setTimeout(function() {
                location.href = './37.html?id=' + id;
              }, 2000)
            } else {
              location.href = './36.html?id=' + id;
            }
          }
          request('enterprise/recruit/' + (params.id || ''), 'PUT', postData, successFn.bind(this), failFn.bind(this))
        }
      }
    })

  </script>
</body>

</html>
